
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#kiesDagdeel").hide();
	

$(function() {
	$( "#datepicker" ).datepicker({
		dateFormat: 'dd-mm-yy'
		});
});

$("#datepicker").change(function() {
	$("#kiesDagdeel").show();
});

$("#kiesDagdeel").change(function() {
	var date = $('#datepicker').val();
	var deel = $('#selectDagdeel').val();
	window.location.href = "?date="+ date +"&deel="+deel;
});
});
</script>
<div id="introtext_reservation" style="text-align: left; margin-left: 20px;">
	<p>Hier kunt u een ruimte binnen de kerk reserveren. De procedure gaat als volgt in werking: <br /><br/>
		1. U selecteert de gewenste datum van reservering &rarr;<br /> 2. U kiest vervolgens het gewenste dagdeel van deze dag &rarr;<br/> 
		3. U krijgt een plattegrond te zien met de beschikbare ruimtes, u kunt de gewenste ruimte aanklikken &rarr; <br /> 4. U kunt
		uw gegevens invullen en de reservering afronden<br /> <br />Het is tevens altijd mogelijk om de datum van de reservering te wijzigen</p>
</div>
<div id="date" style="float:left;margin-left:20px; margin-top: 20px; text-align:left; font-size: 14px;">
Kies de gewenste datum &darr;<br /> <input type="text" id="datepicker" class="datepicker" style="margin-top: 10px; margin-left: 25px; margin-bottom: 10px">
</div>
<div id="kiesDagdeel" style="float:left;margin-left:20px; margin-top: 20px; font-size: 14px;">
	Kies een dagdeel &darr;<br />
    	<select id="selectDagdeel" style="margin-top: 10px; margin-left: 5px">
        	<option value="" selected="selected">-- Maak keuze --</option>
            <option value="ochtend">Ochtend</option>
            <option value="middag">Middag</option>
            <option value="avond">Avond</option>
      	</select>
</div>
<div style="clear:both;" ></div>             
<?
if(isset($_GET['reserveer'])){ echo '<div style="margin-left:20px;">Bedankt voor uw reservering. We nemen contact met u op.</div>';}
if(isset($_GET['id'])){
	echo '
<div style="text-align:left;margin-left:20px;">  
	Vul onderstaande gegevens in om de reservering te bevestigen. U krijgt later een bericht over de goed- of afkeuring van de reservering. Onderstaande reservering is op: '.$_GET['date'].' in de '.$_GET['deel'].'. De gereserveerde ruimte is: '.$this->gekozenruimte.'
	<form method="post" action="?reserveer">
		<input type="hidden" value="'.$_GET['id'].'" name="room_id">
		<input type="hidden" value="'.$_GET['date'].'" name="date">
		<input type="hidden" value="'.$_GET['deel'].'" name="partofday">
		<table>
			<tr>
				<td>Naam *</td>
				<td><input type="text" name="naam" required autofocus></td>
			</tr>
			<tr>
				<td>Email *</td>
				<td><input type="text" name="email" required autofocus></td>
			</tr>
			<tr>
				<td>Adres</td>
				<td><input type="text" name="adres"</td>
			</tr>
			<tr>
				<td>Postcode</td>
				<td><input type="text" name="zipcode" </td>
			</tr>
			<tr>
				<td>Telefoonnummer *</td>
				<td><input type="text" name="telnr" required autofocus></td>
			</tr>
			<tr>
				<Td></td>
				<td><input type="submit" value="Reserveer"></td>
		</table>
	</form>
	</div>';
}
else
{
	if(isset($_GET['date'])){
	foreach($this->reservations as $reservation){
		if($reservation->date == ''){
			echo $reservation->partofday;
		}
	}
	?>
	<div id="floormap" style="height:720px;margin-top:20px; margin-left:20px;text-align:left">
	
		<h3>Beschikbaarheid op <?=$_GET['date'].' in de '.$_GET['deel'];?></h3>
		
		<div style="float:left;">
			<table>
				<tr>
					<th>Ruimte</th>
					<th width="5"></th>
					<th>Prijs</th>
					<th width="5"></th>
					<th>Aantal pers.</th>
				</tr>            
				<?
				foreach($this->rooms as $rooms){
					echo '<tr><td>'.$rooms->name.'</td><td></td><td>'.$rooms->price.'</td><td></td><td>'.$rooms->nrofpeople.'</td></tr>';
				}
				?>
			</table>
		</div>
		<div style="float:left; margin-left:50px;">
			<table>
				<th>Legenda</th>
				<tr>
					<td bgcolor="#12FF00" width="25"></td>
					<td>Ruimte beschikbaar op gekozen datum/tijdstip</td>
				</tr>
				<tr>
					<td bgcolor="#FF9C00" width="25"></td>
					<td>Ruimte in optie op gekozen datum/tijdstip</td>
				</tr>
				<tr>
					<td bgcolor="#FF0000" width="25"></td>
					<td>Ruimte bezet op gekozen datum/tijdstip</td>
				</tr>
			</table>
		</div>
		<div style="clear:both;"></div>
		<Br /><Br />
			Voor het reserveren van een ruimte dient u op de ruimte te klikken.
		<div style="position:relative; width:auto; height:auto;">
		<?
			$consistorie = 'groen';
			$noordentree = 'groen';
			$hansleijdekkerszaal = 'groen';
			$kerkzaal = 'groen';
			
			foreach($this->reservations as $reservations){
				if($reservations->date == date('Y-m-d', strtotime($_GET['date'])) && $reservations->partofday == $_GET['deel'])
				{
					if($reservations->accepted == 0){
						switch($reservations->room_id){
							case('4'): $consistorie = 'oranje';
							break;
							
							case('1'): $kerkzaal = 'oranje';
							break;
							
							case('3'): $noordentree = 'oranje';
							break;
							
							case('2'): $hansleijdekkerszaal = 'oranje';
						}
					}
					else{
						switch($reservations->room_id){
							case('4'): $consistorie = 'rood';
							break;
							
							case('1'): $kerkzaal = 'rood';
							break;
							
							case('3'): $noordentree = 'rood';
							break;
							
							case('2'): $hansleijdekkerszaal = 'rood';
						}
					}
				}
			}
		?>
			<div style="position:absolute;z-index:0;">
				<a href="?date=<?=$_GET['date'];?>&deel=<?=$_GET['deel'];?>&id=4">
					<img src="<?=$this->templateUrl()?>/images/front/Plattegrond/Consistorie_<?=$consistorie;?>.png" border="0"/>
				</a>
			</div>
			<div style="position:absolute;z-index:0;left:210px;">
				<a href="?date=<?=$_GET['date'];?>&deel=<?=$_GET['deel'];?>&id=1">
					<img src="<?=$this->templateUrl()?>/images/front/Plattegrond/Kerkzaal_<?=$kerkzaal;?>.png" border="0"/>
				</a>
			</div>
			<div style="position:absolute;z-index:0;left:332px;">
				<a href="?date=<?=$_GET['date'];?>&deel=<?=$_GET['deel'];?>&id=3">
					<img src="<?=$this->templateUrl()?>/images/front/Plattegrond/Noordentree_<?=$noordentree;?>.png" border="0"/>
				</a>
			</div>
			<div style="position:absolute;z-index:0;left:470px;top:259px;">
				<a href="?date=<?=$_GET['date'];?>&deel=<?=$_GET['deel'];?>&id=2">
					<img src="<?=$this->templateUrl()?>/images/front/Plattegrond/Hansleijdekkerszaal_<?=$hansleijdekkerszaal;?>.png" border="0"/>
				</a>
			</div>
		</div>
		&nbsp;
	</div>

<?
	}
}
?>